<template>
  <div>
    <el-select v-model="value" placeholder="请选择" @change="chooseChartType (value)">
      <el-option
        v-for="item in chartType"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <div>
      <div v-show="barChart">
        <FactoryBarChart></FactoryBarChart>
      </div>
      <div v-show="lineChart">
        <FactoryLineChart></FactoryLineChart>
      </div>
      <div v-show="pieChart">
        <FactoryPieChart></FactoryPieChart>
      </div>
    </div>
  </div>
</template>

<script>
  import FactoryBarChart from '@/components/Chart/FactoryBarChart.vue'
  import FactoryLineChart from '@/components/Chart/FactoryLineChart.vue'
  import FactoryPieChart from '@/components/Chart/FactoryPieChart.vue'
  export default {
    name: 'pointRepair',
    components: {
      FactoryBarChart,
      FactoryLineChart,
      FactoryPieChart
    },
    data () {
      return {
        lineChart: true,
        pieChart: false,
        barChart: false,
        id: 'test',
        chartType: [{
          value: 'line',
          label: '折线图'
        }, {
          value: 'pie',
          label: '饼图'
        }, {
          value: 'bar',
          label: '柱状图'
        }],
        value: '折线图'
      }
    },
    methods: {
      hideAllChart () {
        this.lineChart = false
        this.barChart = false
        this.pieChart = false
      },
      chooseChartType (value) {
        if (value === 'line') {
          this.hideAllChart()
          this.lineChart = true
        } else if (value === 'pie') {
          this.hideAllChart()
          this.pieChart = true
        } else if (value === 'bar') {
          this.hideAllChart()
          this.barChart = true
        }
      }
    }
  }
</script>
